<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<base th:href="@{/}">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="static/theme/index.css">
<link rel="stylesheet" href="static/css/myStyle.css"/>
<link rel="stylesheet" href="static/css/reset.css"/>
</head>
<body>
	<div id="register">
		<template>
			<el-main>
				<p class="title-Register">用户注册</p>
				<el-row class="register-body">
					<el-progress :percentage="percentage" :format="process"></el-progress>
					<el-row class="form-user">
						<el-form label-width="80px" :rules="rules" :ref="ruleForm" :model="ruleForm">
							<div v-show="divActive[0].div">
								<el-form-item label="用户昵称" prop="uid">
									<el-input class="user-input" v-model="ruleForm.uid"></el-input>
								</el-form-item>
								<el-form-item label="密码" prop="upwd">
									<el-input class="user-input" v-model="ruleForm.upwd" show-password></el-input>
								</el-form-item>
								<el-form-item label="确认密码" prop="upwd2">
									<el-input class="user-input" v-model="ruleForm.upwd2" show-password></el-input>
								</el-form-item>
								<el-button v-show="divActive[0].index>0" type="primary" @click="backBtn(divActive[0].index)">上一步</el-button>
				 				<el-button v-show="divActive[0].index<3" type="primary" @click="nextBtn(divActive[0].index)">下一步</el-button>
						
							</div>
							<div v-show="divActive[1].div">
								<el-form-item label="密保问题">
									<el-select class="user-input" v-model="ruleForm.upasswordexpre" placeholder="请选择">
										<el-option value="我最亲密的人"></el-option>
										<el-option value="我的偶像"></el-option>
										<el-option value="我的最喜欢的歌曲"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="密保答案">
									<el-input class="user-input" v-model="ruleForm.upasswordanswer"></el-input>
								</el-form-item>
								<el-form-item label="性别" prop="ugender">
									<el-select prop="ugender" class="user-input" v-model="ruleForm.ugender" placeholder="请选择">
										<el-option value="女"></el-option>
										<el-option value="男"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="邮箱" prop="uemail">
									<el-input class="user-input" v-model="ruleForm.uemail"></el-input>
								</el-form-item>
								<el-form-item label="手机号" prop="uphone">
									<el-input class="user-input" v-model="ruleForm.uphone"></el-input>
								</el-form-item>
								<el-button v-show="divActive[1].index>0" type="primary" @click="backBtn(divActive[1].index)">上一步</el-button>
				 				<el-button v-show="divActive[1].index<3" type="primary" @click="nextBtn(divActive[1].index)">下一步</el-button>
			
							</div>
							<div v-show="divActive[2].div">
								<el-form-item label="职业倾向">
									<el-select multiple  class="user-input" v-model="ruleForm.uinterest" placeholder="请选择">
										<el-option v-for="(o,index) in interestList" :key="index" :value="o.interest"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="头像设置">
									<el-upload
									  class="avatar-uploader"
									  action="https://jsonplaceholder.typicode.com/posts/"
									  :http-request="uploadUserImg"
									  :show-file-list="false"
									  :before-upload="beforeAvatarUpload">
									  <img v-if="imageUrl" :src="imageUrl" class="avatar">
									  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</el-form-item>
								<el-button v-show="divActive[2].index>0" type="primary" @click="backBtn(divActive[2].index)">上一步</el-button>
				 				<el-button v-show="divActive[2].index<2" type="primary" @click="nextBtn(divActive[2].index)">下一步</el-button>
								<el-button v-show="divActive[2].index===2" type="primary" @click="submitBtn">完成</el-button>
							</div>
						</el-form>
				    </el-row>
				</el-row>
			</el-main>
		</template>
	</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="static/js/register.js"></script>
</body>
</html>